<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>前端路由</title>
    <link rel="stylesheet" href="./asset/css/reset.css">
    <style>
        .box {
            height: 220px;
        }

        .box1 {
            background-color: aquamarine;
        }

        .box2 {
            background-color: blanchedalmond
        }

        .box3 {
            background-color: cadetblue;
        }
    </style>
    <script src="./asset/js/utils.js"></script>
    <script src="./asset/js/dom.js"></script>
    <script src="./asset/js/subscrible.js"></script>
    <script src="./asset/js/instance.js"></script>
    <script src="./asset/js/baseRouter.js"></script>
    <script src="./asset/js/hashRouter.js"></script>
    <script src="./asset/js/historyRouter.js"></script>
</head>

<body>
    <div class="box box1"> 目录： <p><a href="box1" type='routerLink'>第1个</a></p>
        <p><a href="box2" type='routerLink'>第2个</a></p>
        <p><a href="box3" type='routerLink'>第3个</a></p>
        <p><a href="box4" type='routerLink'>第4个</a></p>
        <p><a href="box5" type='routerLink'>第5个</a></p>
        <p><a href="box6" type='routerLink'>第6个</a></p>
        <p><a href="test/2?index=1" type='routerLink'>第7个</a></p>
        <p><a href="test/1?index=0" type='routerLink'>第8个</a></p>
        <p><a href="" type='routerLink'>第9个</a></p>
    </div>
    <div id="container"></div>
    <!-- <div class="box box2"> box2 <a name="box2">内容盒子</a>
    </div>
    <div class="box box3"> box3 <a name="box3">内容盒子</a></div>
    <div class="box"> box 占位 <a name="box4">内容盒子</a></div>
    <div class="box"> box 占位<a name="box5">内容盒子</a> </div>
    <div class="box"> box 占位 <a name="box6">内容盒子</a></div>
    <div class="box"> box 占位 <a name="box7">内容盒子</a></div>
    <div class="box"> box 占位 <a name="box8">内容盒子</a></div>
    <div class="box"> box 占位 <a name="box9">内容盒子</a></div>
    <div class="box"> box 占位 </div>
    <div class="box"> box 占位 </div>
    <div class="box"> box 占位 </div>
    <div class="box"> box 占位 </div>
    <div class="box"> box 占位 </div>
    <div class="box"> box 占位 </div> -->
    <script>
        var Route = instanceFactory(HistoryRouter);
        var router = new Route();

        router.setRoutes([{
            path: '/',
            rewrite: 'index'
        },{
            path: '/404',
            rewrite: 'index'
        },{
            path: '/index',
            render: indexRoute
        },{
            path: '/test',
            render: [{
                path: '/:id',
                render: testRoute
            }]
        }]);

        function indexRoute(fullPath)
        {
            console.log('跳转到主页哦',fullPath);
            getId('container').innerHTML = '这里是主页哦' + fullPath;
        }

        function testRoute(fullPath)
        {
            console.log('跳转到测试页面',fullPath);
            getId('container').innerHTML = '这里是测试页面' + fullPath;
        }

    </script>
</body>

</html>